<template>
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header class="home-header">
      <h2>家政服务平台 - 运营管理后台</h2>
      <div class="user-info">
        <span>欢迎你，管理员</span>
        <el-button size="small" @click="logout">退出登录</el-button>
      </div>
    </el-header>

    

    <!-- 主体内容 -->
    <el-main class="home-main">
      <el-row :gutter="20" class="feature-cards">
        <!-- 功能卡片 -->
        <el-col :span="6" v-for="(card, index) in featureCards" :key="index" @click="navigateTo(card.path)">
          <el-card class="feature-card" shadow="hover">
            <i :class="['feature-icon', card.icon]"></i>
            <div class="feature-text">
              <h4>{{ card.title }}</h4>
              <p>{{ card.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 中间欢迎区域 -->
      <el-row class="welcome-section">
        <el-col :span="24">
          <el-card class="welcome-card" shadow="never">
            <h3>欢迎使用家政服务平台运营系统</h3>
            <p>在这里你可以轻松管理订单、用户、服务人员等核心模块。</p>
            <p>点击左侧菜单开始操作。</p>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 功能卡片配置
const featureCards = ref([
  {
    title: '订单管理',
    description: '查看和处理所有家政订单信息',
    icon: 'el-icon-document',
    path: '/order'
  },
  {
    title: '用户管理',
    description: '管理平台注册用户信息',
    icon: 'el-icon-user',
    path: '/user'
  },
  {
    title: '服务人员管理',
    description: '查看并维护服务人员资料',
    icon: 'el-icon-briefcase',
    path: '/service'
  },
  {
    title: '服务项目设置',
    description: '配置各类家政服务项目',
    icon: 'el-icon-setting',
    path:'service-setting'
  }
])

// 退出登录方法
const logout = () => {
  // 清除 token 或跳转逻辑
  router.push('/login')
}
const navigateTo = (path) =>{
    router.push(path)
}
</script>

<style scoped>
.home-container {
  height: 100vh;
  background-color: #f5f7fa;
  font-family: 'Segoe UI', sans-serif;
}

.home-header {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 0 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-cards {
  margin-top: 30px;
}

.feature-card {
  border-radius: 12px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  font-size: 40px;
  color: #4e54c8;
  margin-right: 15px;
}

.feature-text h4 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.feature-text p {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.feature-card:nth-child(1) .feature-icon {
  color: #4e54c8;
}

.feature-card:nth-child(2) .feature-icon {
  color: #8f94fb;
}

.feature-card:nth-child(3) .feature-icon {
  color: #4a9eff;
}

.feature-card:nth-child(4) .feature-icon {
  color: #ff9800;
}

.welcome-section {
  margin-top: 40px;
}

.welcome-card {
  text-align: center;
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.welcome-card h3 {
  margin-bottom: 15px;
  color: #333;
}

.welcome-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
}
</style>